﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0" name="viewport">
    <title>css3 骰子 animate nick</title>
    <style>
        /*先将容器ul相对定位，在将li绝对定位，则每个面li都在左上角便于rotate*/
        ul, li, div, p {
            margin: 0;
            padding: 0;
        }

        .container {
            position: relative;
            list-style: none;
            transform: translate(100px,100px) rotateX(0deg) rotateY(0deg); /*过渡xy方向以及旋转http://www.w3school.com.cn/cssref/pr_transform.asp*/
            transform-style: preserve-3d; /*嵌套元素以3d展示 http://www.w3school.com.cn/cssref/pr_transform-style.asp*/
            transform-origin: 50px 50px; /*旋转中心位置http://www.w3school.com.cn/cssref/pr_transform-origin.asp*/
            animation: nickAnimate 5s ease infinite; /*动画调用http://www.w3school.com.cn/cssref/pr_animation.asp*/
            animation-fill-mode: forwards; /*规定动画完成后停留在最后一帧http://www.w3school.com.cn/cssref/pr_animation-fill-mode.asp*/
            animation-play-state: paused; /*默认为paused，不然页面刷新会自动执行动画的http://www.w3school.com.cn/cssref/pr_animation-play-state.asp*/
        }

        @keyframes nickAnimate { /*动画定义*/
            0% {
                transform: translate(100px,100px) rotateX(0deg) rotateY(0deg);
            }

            100% {
                transform: translate(130px,120px) rotateX(1360deg) rotateY(1360deg);
            }
        }

        .container > li {
            position: absolute;
            width: 100px;
            height: 100px;
            border-radius: 15px;
            background: #DDDBE6;
            overflow: hidden;
            border: 1px solid #ddd;
        }
        /*将每个面rotate成一个立方体*/
        .lf {
            transform: rotateY(90deg) translateZ(-50px);
        }

        .rt {
            transform: translateX(100px) rotateY(90deg) translateZ(-50px);
        }

        .top {
            transform: translateY(-50px) rotateX(90deg);
        }

        .btm {
            transform: translateY(50px) rotateX(90deg);
        }

        .in {
            transform: translateZ(50px);
        }

        .out {
            transform: translateZ(-50px);
        }
        /*现在可以看到一个立方体了吧，下面就是一些定位样式渲染成骰子的样子*/
        .c-num { /*点数容器*/
            position: relative;
            width: 100%;
            height: 100%;
            background: radial-gradient(#fff 35%,#DDDBE6);
        }

        p[class^='num'] { /*点数公用样式 我把每个点都居中了，然后在translate，其实直接translate或者position也可以，仁者见仁智者见智吧*/
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: red;
            border-radius: 50%;
            top: 50%;
            left: 50%;
            margin-top: -5px;
            margin-left: -5px;
        }
        /*点数1的面已经居中*/
        .lf .num1 {
        }
        /*点数2的面translate慢慢调吧*/
        .in .num1 {
            transform: translate(-5px,-20px);
        }

        .in .num2 {
            transform: translate(-5px,20px);
        }
        /*点数3的面*/
        .rt .num1 {
            transform: translate(-5px,-30px);
        }

        .rt .num2 {
            transform: translateX(-5px);
        }

        .rt .num3 {
            transform: translate(-5px,30px);
        }
        /*点数4的面*/
        .out .num1 {
            transform: translate(-20px,20px);
        }

        .out .num2 {
            transform: translate(-20px,-20px);
        }

        .out .num3 {
            transform: translate(20px,20px);
        }

        .out .num4 {
            transform: translate(20px,-20px);
        }
        /*点数5的面*/
        .top .num1 {
            transform: translate(25px,-30px);
        }

        .top .num2 {
            transform: translate(-25px,-30px);
        }

        .top .num4 {
            transform: translate(-25px,25px);
        }

        .top .num5 {
            transform: translate(25px,25px);
        }
        /*点数6的面*/
        .btm .num1 {
            transform: translate(-25px,30px);
        }

        .btm .num2 {
            transform: translate(-25px,0px);
        }

        .btm .num3 {
            transform: translate(-25px,-30px);
        }

        .btm .num4 {
            transform: translate(15px,30px);
        }

        .btm .num5 {
            transform: translate(15px,0px);
        }

        .btm .num6 {
            transform: translate(15px,-30px);
        }
    </style>
</head>
<body>
    <!--功能-运行、暂停按钮-->
    <button class="run">摇啊摇</button>
    <button class="paused">暂停</button>
    <!--骰子的结构-->
    <!--骰子容器包裹6个面；每个面里面包裹一个点数容器用于position；最后就是调点数样式了-->
    <ul class="container">
        <li class="lf">
            <div class="c-num">
                <p class="num1"></p>
            </div>
        </li>
        <li class="rt">
            <div class="c-num">
                <p class="num1"></p>
                <p class="num2"></p>
                <p class="num3"></p>
            </div>
        </li>
        <li class="top">
            <div class="c-num">
                <p class="num1"></p>
                <p class="num2"></p>
                <p class="num3"></p>
                <p class="num4"></p>
                <p class="num5"></p>
            </div>
        </li>
        <li class="btm">
            <div class="c-num">
                <p class="num1"></p>
                <p class="num2"></p>
                <p class="num3"></p>
                <p class="num4"></p>
                <p class="num5"></p>
                <p class="num6"></p>
            </div>
        </li>
        <li class="in">
            <div class="c-num">
                <p class="num1"></p>
                <p class="num2"></p>
            </div>
        </li>
        <li class="out">
            <div class="c-num">
                <p class="num1"></p>
                <p class="num2"></p>
                <p class="num3"></p>
                <p class="num4"></p>
            </div>
        </li>
    </ul>
    <ul class="container">
        <li class="lf">
            <div class="c-num">
                <p class="num1"></p>
            </div>
        </li>
        <li class="rt">
            <div class="c-num">
                <p class="num1"></p>
                <p class="num2"></p>
                <p class="num3"></p>
            </div>
        </li>
        <li class="top">
            <div class="c-num">
                <p class="num1"></p>
                <p class="num2"></p>
                <p class="num3"></p>
                <p class="num4"></p>
                <p class="num5"></p>
            </div>
        </li>
        <li class="btm">
            <div class="c-num">
                <p class="num1"></p>
                <p class="num2"></p>
                <p class="num3"></p>
                <p class="num4"></p>
                <p class="num5"></p>
                <p class="num6"></p>
            </div>
        </li>
        <li class="in">
            <div class="c-num">
                <p class="num1"></p>
                <p class="num2"></p>
            </div>
        </li>
        <li class="out">
            <div class="c-num">
                <p class="num1"></p>
                <p class="num2"></p>
                <p class="num3"></p>
                <p class="num4"></p>
            </div>
        </li>
    </ul>
    <script>
        //    摇啊摇、暂停按钮就是控制animate的运行状态
        document.getElementsByClassName('run')[0].onclick = function () {
            document.getElementsByClassName('container')[0].style.animationPlayState = 'running';
        };
        document.getElementsByClassName('paused')[0].onclick = function () {
            document.getElementsByClassName('container')[0].style.animationPlayState = 'paused';
        };
    </script>
</body>
</html>